<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.clearFix::after{
			content: "";
			clear: both;
			display: block;
		}
		a{
			text-decoration: none;
		}
		.box{
			width: 100%;
			border-bottom: 2px solid #777;
		}
		.header{
			width: 1000px;
/*			height: 56px;*/
/*			background-color: red;*/
			margin: 0 auto;
			padding-top: 15px;
			padding-bottom: 12px;
		}
		.header>a{
			width: 120px;
			height: 40px;
			float: left;
			background-image: url("../001.png");
		}
		.nav{
			float: left;
			height: 36px;
			line-height: 36px;
			margin-left: 270px;
		}
		.nav a{
			color: red;
			margin:0 10px;
		}
		.nav a:hover{
			background-color: red;
			color: #ffffff;
		}
		.login{
			float: right;
			height: 36px;
			line-height: 36px;
			margin-right: 50px;

		}
		.login a{
			color: red;
			margin: 0 10px;
		}

		.content-only>img{
			border-radius: 50%;
			vertical-align: middle;
			margin: 10px;
			
		}
		.title{
			width: 1000px;
			margin: 20px auto;

			}	
			.mian{
				float: left;
			}	
			
		.mian img{
			width: 500px;
/*			float: left;*/
		}
		.mian-only{
			float: left;
			width: 300px;
			height: 340px;
			border: 1px solid black;
			background-color: #eeecec;
			text-align: center;
			line-height: 50px;
		}

		.a{
			width: 160px;
			border: 1px solid black;
			background-color: red;
			margin: 10px auto;
			margin-top: 30px;
		}
		.b{
			width: 160px;
			border: 1px solid black;
			background-color: red;
			margin: 10px auto;
		}
		.c a{
			color: white;
		}
		.d a{
			color: red;
		}
		.d a:nth-of-type(2){
			margin-top: 50px;
		}
		.h1{
			float: left;
		}
		.h2{
			margin-left:40px ;
		}
		
	</style>
</head>
<body>

<div class="box">
		<div class="header clearFix">
			<a href=""></a>
			<div class="nav">
				<a href="">首页</a>
				<a href="">菜谱分类</a>
				<a href="">菜单</a>
				<a href="">作品动态</a>
			</div>
			<div class="login">
				<a href="">登录</a>
				<a href="">注册</a>
			</div>
		</div>
	</div>



	<div class="title">
		
		<div class="content ">
			<div class="h1">
			<div class="content-only clearFix">
				<img src="../002.jpg">
				<span>家常菜</span>
			</div>

				<div class="content-only clearFix">
					<img src="../002.jpg">
					<span>快手菜</span>
				</div>


				<div class="content-only clearFix">
					<img src="../002.jpg">
					<span>下饭菜</span>
				</div>


				<div class="content-only clearFix">
					<img src="../002.jpg">
					<span>早餐</span>
				</div>

				<div class="content-only clearFix">
					<img src="../002.jpg">
					<span>肉</span>
				</div>

				<div class="content-only clearFix">
					<img src="../002.jpg">
					<span>鱼</span>
				</div>

				<div class="content-only clearFix">
					<img src="../002.jpg">
					<span>蔬菜</span>
				</div>
				</div>



			<div class="mian  h1  h2">
				<img src="../2.jpg">
			</div>




			<div class="mian-only h1 h2">
				<div  class="c">
					<div class="a">
				<a href="">QQ登录</a>
				</div>
				
				<div class="b">
				<a href="">微信登录</a>
				</div>
			</div>

				

				<div  class="d">
				<div>
				<a href="">手机/邮箱|注册</a>
				</div>
				
				<div>
				<a href="">网上有害信息举报专区</a>
					</div>
				</div>

				
			</div>


		</div>

	</div>


</body>
</html>